import React, { FC, useState, createContext, memo, CSSProperties } from 'react'
import classNames from 'classnames';

type MenuMode = 'horizontal' | 'vertical'
export interface MenuProps {
  /**默认 active 的菜单项的索引值 */
  defaultIndex?: string;
  className?: string;
  /**菜单类型 横向或者纵向 */
  mode?: MenuMode;
  style?: CSSProperties;
  /**点击菜单项触发的回掉函数 */
  onSelect?: (selectedIndex: string) => void;
  /**设置子菜单的默认打开 只在纵向模式下生效 */
  defaultOpenSubMenus?: string[];
}
const Menu: FC<MenuProps> = (props) => {
  const {
    defaultIndex,
    className,
    mode,
    children,
    style,
    onSelect,
    defaultOpenSubMenus,
  } = props
  const classes = classNames('menu', className, {
    'menu-horizontal': mode === 'horizontal',
    'menu-vertical': mode !== 'horizontal'
  })
  return (
    <ul className={classes}>{children}</ul>
  )
}
export default Menu

